'use client';
import { exportAndDownloadByBuffer } from '@/util';
import styles from './index.module.scss';
import { downloadWord } from '@/service';
import { useSetState } from 'ahooks';
import Loading2 from '@/app/components/Loading2';

function Index({ title, id }) {
  const list = [
    {
      id: 121,
      title: '个人简历应该怎么写？',
      description:
        '个人简历应该怎么写？百捷简历攻略提供HR专家原创内容，包括简历技巧、求职指南、面试攻略、职场攻略以及大量案例，配合专业的中英双语简历模板，高效制作专业求职简历，同时各行业简历模板免费下载。',
      img: 'https://resume.cjasen.com/EEPfVV81588068465NxCMRvN6678158.png',
    },
    {
      id: 137,
      title: '无工作经验的应届生如何制作简历？',
      description:
        '无工作经验的应届生如何制作简历？百捷简历攻略提供HR专家原创内容，包括简历技巧、求职指南、面试攻略、职场攻略以及大量案例，配合专业的中英双语简历模板，，高效制作专业求职简历，同时各行业简历模板免费下载。',
      img: 'https://resume.cjasen.com/tcmtDnL1588067693DAhE4dF6678093.png',
    },
    {
      id: 7,
      title: '面试官都喜欢看到什么样的求职简历？',
      description:
        '什么样的简历才是面试官最喜欢的?求职简历中一定不可以出现哪些内容，你都知道吗?很多人应届毕业生都在烦恼不知道求职简历该怎么写?由于简历没有弄好，到现在都还没有开始投简历找工作。今晚小编就分享几个小技巧，告诉你面试官都喜欢看到什么样的简历，哪些内容一定不可以在简历中出现。',
      img: 'https://resume.cjasen.com/1470713112740994.png',
    },
    {
      id: 8,
      title: '无工作经验的应届毕业生如何制作简历？',
      description:
        '01. 应届毕业生也能写好简历自从我的课程上线后，每周都会有10几个同学在微信问',
      img: 'https://resume.cjasen.com/lohzCMn1588067902e2hZLYX6678118.png',
    },
    {
      id: 9,
      title: '简历中的减分项有哪些',
      description:
        '百捷简历攻略提供HR专家原创内容，包括简历技巧、求职指南、面试攻略、职场攻略以及大量案例，配合专业的中英双语简历模板，致力于帮助求职者顺畅找到高薪名企好工作，精选名企大牛简历案例模板，高效制作专业求职简历，同时各行业简历模板免费下载，百捷简历模板能够帮助求职者大大提升获得面试的几率。',
      img: 'https://resume.cjasen.com/5JcncVj1588067615oKFAhDk6678089.png',
    },
  ];
  const [state, setState] = useSetState({
    loading: false,
  });
  return (
    <div>
      <div className={styles.rightContent}>
        <div className={styles.head}>
          <h3 className={styles.title}>{title?.replace('.docx', '')}</h3>
          <a className={styles.more} href={'/muban/list'}></a>
        </div>
        <div className={styles.detail}>
          <div className={styles.item}>
            <span>格式：docx</span>
            <span>尺寸：A4</span>{' '}
          </div>
          <div className={styles.item}>
            <span>语言：中文</span>
            <span>版权：百捷简历</span>
          </div>
        </div>
        <button
          className={styles.btn}
          disabled={state.loading}
          onClick={async () => {
            setState({
              loading: true,
            });
            await exportAndDownloadByBuffer(downloadWord({ id }));
            setState({
              loading: false,
            });
          }}
        >
          {state.loading ? <Loading2 /> : null}
          立即下载
        </button>
      </div>
      <div className={styles.rightContent}>
        <div className={styles.head}>
          <h3 className={styles.title}>内容推荐</h3>
          <a className={styles.more} href={'/recommend/1'}>
            更多内容 {'>>'}
          </a>
        </div>
        {list.map((item) => {
          return (
            <a
              href={`/recommendDetail/${item.id}`}
              className={styles.contentItem}
              key={item.id}
            >
              <div className={styles.info}>
                <h4 className={styles.title}>{item.title}</h4>
                <h5 className={styles.desc}>{item.description}</h5>
              </div>
            </a>
          );
        })}
      </div>
    </div>
  );
}
export default Index;
